// 商品模块
<template lang='pug'>
.spbox(@click.stop="to4Page")
  .img
    img(:src="citem.cmmdtyCode | newImgUrl(citem.cmmdtyImageSrc)" @error="error")
  .content(:class="[{wuhuo:citem.price == -1 || citem.price=='' || citem.saleType == '1' || citem.availableQty == '0' || citem.availableQty == ''},{noper:noper}]")
    p.title {{citem.cmmdtyName}}
    p.sm {{citem.salePoint}}
    span.rmb(v-if="!iswuhuo") &yen;
    span.now-price {{iswuhuo?'暂无报价':citem.price}}
    span(v-if="citem.basePrice != null && citem.basePrice != citem.price && citem.basePrice != ''").old-price &yen;{{citem.basePrice}}
    span.brd  {{citem.sendFlagStr}}
    .percentage(v-if="!noper")
      span 已售{{per}}
      .all
        .is(:style="{width:per}")
    .btn(v-if="per=='100%'") 已售完
    .btn(v-else) 立即抢购
</template>
<script>
export default {
  props: ['citem','noper'],
  data() {
    return {
      per: '0%',
      iswuhuo: false,
    }
  },
  created() {
    this.getPer();
    if(this.citem.price == -1 || this.citem.price=='' || this.citem.saleType == '1' || this.citem.availableQty == '0' || this.citem.availableQty == '') {
      this.iswuhuo = true;
      this.per = '100%'
    }
  },
  methods: {
    error(e) {
      e.target.src = "/static/images/pro-default.png"
    },
    to4Page(e) {
      this.$router.push({path:`/detail/${this.citem.cmmdtyCode}/${this.citem.supplierCode}`})
    },
    getPer() {
      let str = this.citem.per
      if (!str) {
        return '0%'
      }
      this.per = str.split('_')[1]
    }
  }
}
</script>
<style lang='scss' scoped>
@import './tool.scss';
.spbox {
  width: 100%;
  height: _(236);
  background-color: #fff;
  .img {
    width: _(200);
    height: _(200);
    float: left;
    margin-top: _(12);
    margin-left: _(20);
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    width: _(490);
    height: _(200);
    float: left;
    margin-left: _(20);
    margin-top: _(12);
    position: relative;
    overflow: hidden;
    .percentage {
      width: _(270);
      height: _(28);
      position: absolute;
      right: 0;
      bottom: 0;
      line-height: _(28);
      text-align: left;
      font-size: _(20);
      color: #aaa;
      span {
        display: block;
        float: left;
      }
      .all {
        float: left;
        margin-left: _(8);
        width: _(172);
        height: _(8);
        margin-top: _(10);
        box-sizing: border-box;
        border: 1px solid #ff782d;
        border-radius: _(4);
        .is {
          height: 100%;
          width: 30%;
          background-color: #ff782d;
        }
      }
    }
    .title,.sm {
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .title {
      font-size: _(28);
      color: #555;
      line-height: _(40);
    }
    .sm {
      font-size: _(24);
      color: #aaa;
      line-height: _(33);
      margin-top: _(6);
    }
    .now-price,.old-price {
      display: inline-block;
      line-height: _(50);
    }
    .now-price,.rmb {
      font-size: _(36);
      color:#ff782d;
    }
    .rmb {
      font-size: _(28);
    }
    .old-price {
      margin-left: _(13);
      font-size: _(28);
      color: #aaa;
      text-decoration:line-through
    }
    .brd {
      display: block;
      position: absolute;
      padding: _(0) _(12);
      line-height:  _(26);
      left: 0;
      bottom: 0;
      font-size:_(18);
      color:#ff782d;
      border: 1px solid #ff782d;
      border-radius: 100px;
      text-align: center;
      line-height:  _(26);
    }
    .btn {
      position: absolute;
      width: _(180);
      height: _(49);
      right: _(10);
      bottom: _(31);
      text-align: center;
      line-height: _(49);
      color: #fff;
      background-color: #ff782d;
      box-shadow:0 4px 8px 0 rgba(255,124,51,0.40);
      border-radius: 150px;
    }
  }
  .wuhuo {
    .rmb,.now-price {
      color: #aaa;
    }
    .percentage {
      width: _(288)
    }
    .btn {
      color: #999;
      background:#eeeeee;
      box-shadow:0 4px 8px 0 rgba(238,238,238,0.40);
    }
  }
  .noper {
    .btn {
      bottom: _(15);
    }
  }
}
</style>